<template>
  <div class="servicePackageList padding_20">
    <el-input v-model="searchCondition"
              placeholder="请输入问题名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="showEdit(null)">新 增</el-button>
    <!--服务包列表-->
    <Table stripe
           border
           :columns="titles"
           :data="dataList"
           class="mt-20">
      <template slot-scope="{row,index}"
                slot="action">
        <span @click="showEdit(index)">编辑</span>
        <span @click="deleteQuestion(index)">删除</span>
      </template>
    </Table>
    <!--分页-->
    <Page :current.sync="currentPage"
          :total="totals"
          :page-size="pageSize"
          @on-change="initTableData"
          show-total />
    <Modal v-model="editDiseaseQuestion"
           fullscreen
           :loading="loading"
           @on-ok="saveData"
           title="转诊病种问题模板">
      <div style="background:#eee;padding: 20px">
        <Card :bordered="false"
              style="margin-top: 20px">
          选择病种：<Select v-model="editModel.diseaseId"
                  filterable
                  remote
                  @on-change="changeDisease"
                  :remote-method="initDiseaseData"
                  :loading="loading1"
                  class="input_1"
                  clearable>
            <Option v-for="(option, index) in diseaseList"
                    :value="option.id"
                    :key="index">{{option.name}}</Option>
          </Select>
        </Card>
        <Card :bordered="false">
          病种题目说明： <Input v-model="editModel.remark"
                 placeholder="请输入题目说明"
                 style="width: 400px" />
          <Button icon="ios-add"
                  class="btn_1"
                  @click="addQuestion"
                  style="width: 110px">新增问题</Button>
          <div style="padding: 10px;">
            <Card v-for="(question, index) in editModel.questionList"
                  :bordered="true"
                  :key="index">
              <div style="margin-top: 10px; margin-bottom: 10px">
                <p> 问题序号：<Input v-model="question.num"
                         placeholder="请输入排序号"
                         style="width: 100px" />
                  问题名称：<Input v-model="question.title"
                         placeholder="请输入标题"
                         style="width: 300px" />
                  问题类型：<Select v-model="question.questionType"
                          filterable
                          remote
                          :loading="loading1"
                          class="input_1"
                          clearable>
                    <Option v-for="(option, index) in questionTypeList"
                            :value="option.id"
                            :key="index">
                      {{option.name}}
                    </Option>
                  </Select>
                  <Button icon="ios-add"
                          class="btn_1"
                          @click="addQuestionItem(question)"
                          style="width: 110px">新增选项
                  </Button>
                  <Button icon="ios-add"
                          class="btn_1"
                          @click="deleteQuestion(editModel,index)"
                          style="width: 110px">
                    删除问题
                  </Button>
                </p>
              </div>
              <div v-for="(item, index) in question.itemList"
                   style="margin-top: 5px"
                   :key="index">
                选项序号：<Input v-model="item.num"
                       placeholder="请输入选择序号"
                       style="width: 100px" />
                选项内容：<Input v-model="item.content"
                       placeholder="请输入选项内容"
                       style="width: 300px" />
                <Button icon="ios-add"
                        class="btn_1"
                        @click="deleteQuestionItem(question, index)"
                        style="width: 110px">
                  删除选项
                </Button>
              </div>
            </Card>
          </div>
        </Card>
      </div>
    </Modal>

    <Modal v-model="confirmModal"
           title="是否删除"
           :loading="loading"
           @on-ok="goToDelete">
      <p>您确定删除该条数据吗？</p>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "referralDiseaseQuestions",
    data () {
      let vm = this;
      return {
        searchCondition: null,
        confirmModal: false,
        currentPage: 1,
        totals: 0,
        pageSize: 20,
        diseaseId: null,
        loading1: false,
        editDiseaseQuestion: false,
        loading: false,
        questionTypeList: [
          { "name": "单选题", "id": 1 },
          { "name": "多选题", "id": 2 },
          { "name": "填空题", "id": 3 },
          { "name": "简答题", "id": 4 },
          { "name": "判断题", "id": 5 }
        ],
        titles: [
          {
            title: '病种名称',
            key: 'name'
          },
          {
            title: '病种介绍',
            key: 'introduceUrl'
          },
          {
            title: '创建时间',
            key: 'createTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '修改时间',
            key: 'laseUpdateTime',
            render: (h, params) => {
              return h('span',
                this.commonFunction.timestampFormat(new Date(params.row.lastUpdateTime), 'yyyy-MM-dd hh:mm:ss'));
            }
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 100
          }
        ],
        diseaseList: [],
        dataList: [],
        editModel:
        {
          id: null,
          diseaseId:
            null,
          diseaseName:
            null,
          remark:
            null,
          questionList:
            [
              {
                id: null,
                title: null,
                description: null,
                questionType: null,
                num: null,
                itemList: [
                  {
                    id: null,
                    diseaseQuestionId: null,
                    num: null,
                    content: null,
                    remark: null
                  },
                ]
              }
            ]
        },
      }
    }
    ,
    created () {
      this.initTableData();
      this.initDiseaseData(null);
    }
    ,
    methods: {
      initDiseaseData (obj) {
        this.post(this.api.disease.getAllDiseaseList, {
          "searchCondition": obj,
          "pageIndex": 0,
          "pageSize": 100
        }).then((res) => {
          this.diseaseList = res.data.object;
          this.totals = res.data.totalNum;
        });
      },
      showEdit (obj) {
        if (obj != null) {
          let po = this.dataList[obj];
          let diseaseId = po.id;
          let param = {
            "diseaseId": diseaseId
          };
          this.post(this.api.disease.getDiseaseQuestionDetail, param).then((res) => {
            if (res.data.code === '200') {
              let questionList = res.data.object;
              var disease = {};
              if (questionList != null && questionList.length > 0) {
                let question = questionList[0];
                this.editModel.remark = question.remark;
                this.editModel.diseaseId = question.diseaseId;
                this.editModel.diseaseName = question.diseaseName;

                disease.id = question.diseaseId;
                disease.name = question.diseaseName;
              }
              this.editModel.questionList = questionList;

              this.diseaseList = [];
              this.diseaseList.push(disease);
              this.diseaseId = disease.id;
            } else {
              this.$Message.error(res.data.message);
            }
          });
        } else {
          this.diseaseList = [];
          this.editModel = {
            id: null,
            diseaseId: null,
            diseaseName: null,
            remark: null,
            questionList:
              [
                {
                  id: null,
                  title: null,
                  description: null,
                  questionType: null,
                  num: null,
                  itemList: [
                    {
                      id: null,
                      diseaseQuestionId: null,
                      num: null,
                      content: null,
                      remark: null
                    },
                  ]
                }
              ]
          }
        }
        this.editDiseaseQuestion = true;
      },
      remoteMethod1 (query) {

      },
      handleChange (page) {
        let _start = (page - 1) * this.pageSize;
        let _end = page * this.pageSize;
      },
      handleQuery() {
        this.currentPage = 1
        this.initTableData()
      },
      initTableData () {
        let param = {
          "name": this.searchCondition,
          "pageIndex": this.currentPage - 1,
          "pageSize": this.pageSize
        };
        this.post(this.api.disease.getDiseaseQuestionList, param).then((res) => {
          if (res.data.code === '200') {
            this.dataList = res.data.object;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      saveData () {
        let saveData = [];
        let questionList = this.editModel.questionList;
        if (questionList == null || questionList.length == 0) {
          this.$Message.error("病种问题不能为空");
          return;
        }
        for (let i = 0; i < questionList.length; i++) {
          let question = questionList[i];
          question.diseaseId = this.editModel.diseaseId;
          question.remark = this.editModel.remark;
          saveData.push(question);
        }
        this.post(this.api.disease.uploadDiseaseQuestionInfo, saveData).then((res) => {
          if (res.data.code === '200') {
            initTableData();
            this.editDiseaseQuestion = false;
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      goToDelete () {

      },
      changeDisease (diseaseId) {
        this.diseaseId = diseaseId;
      },
      addQuestion () {
        let questionObj = {
          id: null,
          title: null,
          description: null,
          questionType: null,
          num: null,
          itemList: [
            {
              id: null,
              diseaseQuestionId: null,
              num: null,
              content: null,
              remark: null
            },
          ]
        };
        this.editModel.questionList.push(questionObj);
      },
      addQuestionItem (obj) {
        let item = {
          id: null,
          diseaseQuestionId: null,
          num: null,
          content: null,
          remark: null
        };
        obj.itemList.push(item);
      },
      deleteQuestion (obj, index) {
        let questionList = obj.questionList;
        let newQuestionList = [];
        for (let i = 0; i < questionList.length; i++) {
          if (i != index) {
            newQuestionList.push(questionList[i]);
          }
        }
        obj.questionList = newQuestionList;
      },
      deleteQuestionItem (obj, index) {
        let itemList = obj.itemList;
        let newItemList = [];
        for (let i = 0; i < itemList.length; i++) {
          if (i != index) {
            newItemList.push(itemList[i]);
          }
        }
        obj.itemList = newItemList;
      }
    }
  }
</script>

<style scoped>
</style>
